<script setup lang="ts">
import { reactive, ref } from 'vue'

const menuData = reactive([
  {
    label: '首页',
    path: '/',
    icon: '',
  },
  {
    label: '个人中心',
    path: '/blog/user',
    icon: '',
  },
  {
    label: '每日一记',
    path: '/blog/diary',
    icon: '',
  },
  {
    label: '小小一扇窗',
    path: '/blog/news',
    icon: '',
  },
  {
    label: '杂项',
    path: '/blog/sundires',
    icon: '',
  },
])
const activeIndex = ref(0)
</script>

<template>
  <el-menu
    :default-active="String(activeIndex)"
    mode="horizontal"
    text-color="#fff"
    background-color="#43f9dbf2"
    active-text-color="orange"
  >
    <el-menu-item
      v-for="(item, index) in menuData"
      :key="index"
      :index="item.path"
    />
  </el-menu>
</template>
